import React from "react";
import {
  Link,
  Switch,
  Route,
  useHistory,
  useLocation,
  useRouteMatch,
  useParams,
} from "react-router-dom";

const Home = () => {
  // useHistory方法执行的时候，会返回history对象，就是props.history
  const history = useHistory();
  const location = useLocation();
  const match = useRouteMatch();
  const params = useParams();

  const fn = () => {
    console.log("history", history);
    console.log("location", location);
    console.log("match", match);
    console.log("params", params);
    // history.push("/about");
  };

  return (
    <div>
      这是首页 - <button onClick={fn}>btn</button>
    </div>
  );
};
const About = () => {
  return <div>这是关于页</div>;
};

const App = () => {
  return (
    <>
      <h2>router-hooks</h2>
      <ul>
        <li>
          <Link to="/home">首页</Link>
        </li>
        <li>
          <Link to="/about">关于页</Link>
        </li>
      </ul>

      <hr />

      <Switch>
        <Route path="/home">
          <Home />
        </Route>
        <Route path="/about">
          <About />
        </Route>
      </Switch>
    </>
  );
};

export default App;
